<template>
    <div>
        <van-form @submit="onSubmit" label-width="8.0em">
            <van-collapse v-model="activeName" accordion>
                <van-collapse-item id ="company" title="隶属保险公司" name="1" :value="company" required @click.native="selectCompany()">
                    <van-picker
                            title="选择"
                            show-toolbar
                            :columns="companyNameList"
                            @confirm="onConfirm"
                            @cancel="onCancel"
                            @change="onChange"
                    />
                </van-collapse-item>
            </van-collapse>
            <van-field
                    required
                    v-model="name"
                    name="姓名"
                    label="姓名"
                    placeholder=""
                    :rules="[{ required: true, message: '姓名必填！' }]"
            />
            <van-field name="头像" label="头像" required>
                <template #input>
                    <van-uploader
                            v-model="uploader"
                            name="avatar"
                            accept="image/*"
                            upload-text="上传头像"
                            max-count = "1"
                            :max-size="3 * 1024 * 1024"
                            :before-read="beforeRead"
                            :after-read="afterRead"
                            @oversize="onOversize">
                    </van-uploader>
                </template>
            </van-field>
            <van-field
                    required
                    v-model="phone"
                    name="电话"
                    label="电话"
                    placeholder=""
                    :rules="[{ required: true, message: '电话必填！' }]"
            />
            <van-field
                    required
                    v-model="year"
                    name="从业年限"
                    label="从业年限"
                    placeholder=""
                    :rules="[{ required: true, message: '从业年限！' }]"
            />
            <van-field
                    required
                    v-model="motto"
                    name="服务宣言"
                    label="服务宣言"
                    placeholder="一句话概括自己"
                    :rules="[{ required: true, message: '必填，服务宣言会在列表中展示，加深客户印象！' }]"
            />
            <van-field name="风采展示" label="风采展示">
                <template #input>
                    <van-uploader
                            multiple
                            name="show"
                            v-model="fileList"
                            accept="image/*"
                            max-count = "3"
                            :max-size="3 * 1024 * 1024"
                            :before-read="beforeRead"
                            :after-read="afterRead"
                            @oversize="onOversize"
                            @delete="deleteFile">
                    </van-uploader>
                </template>
            </van-field>
            <!--<van-field-->
                    <!--v-model="email"-->
                    <!--name="邮箱"-->
                    <!--label="邮箱"-->
                    <!--placeholder="邮箱"-->
            <!--/>-->
            <van-field
                    v-model="work_id"
                    name="工号"
                    label="工号"
                    placeholder=""
            />

            <van-field
                    v-model="customer_num"
                    name="客户数量"
                    label="客户数量"
                    placeholder=""
            />
            <van-field
                    v-model="customer_payment"
                    name="客户理赔"
                    label="客户理赔"
                    placeholder="万元"
            />
            <van-field
                    v-model="insurance_num"
                    name="保单数量"
                    label="保单数量"
                    placeholder=""
            />
            <van-field
                    v-model="sum_money"
                    name="客户保障"
                    label="客户保障"
                    placeholder="万元"
            />
            <van-field
                    v-model="service_range"
                    name="服务介绍"
                    label="服务介绍"
                    placeholder=""
            />
            <van-field
                    v-model="privilege_service"
                    name="特权服务"
                    label="特权服务"
                    placeholder=""
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import Vue from 'vue';
    import axios from 'axios';
    import {Collapse, CollapseItem,Field, Button, Picker, Form, Toast, Uploader,Empty} from 'vant';
    Vue.use(Field);
    Vue.use(Button);
    Vue.use(Picker);
    Vue.use(Toast);
    Vue.use(Uploader);
    Vue.use(Form);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    Vue.use(Empty);
    export default {
        data() {
            return {
                activeName:'',
                companyNameList: [],
                companyIdList: [],
                uploader: [],
                fileList: [],
                showList: [],
                fileIds:[],
                avatar: '',
                name:'',
                motto:'',
                company:'',
                companyId:'',
                work_id:'',
                phone:'',
                email:'',
                customer_num:'',
                customer_payment:'',
                insurance_num:'',
                sum_money:'',
                privilege_service:'',
                service_range:'',
                year:'',
            };
        },
        methods: {
            created() {
                //初始函数
            },
            selectCompany :async function() {
                if(this.companyNameList.length === 0){
                    var companys = [];
                    var companyIds = [];
                    await  axios.post('metadata/data/queryData?token=da38811ef3919d5e90323333c982c62a', {
                        app_id: '5f840b5311cf801f6267ef6f',
                        obj_id: '5f840bab11cf801f6267ef70'
                    }).then(function (response) {
                        let datas = response['data']['result']['datas'];
                        for (const data of datas) {
                            companys.push(data.name.value);
                            companyIds.push(data.id.value)
                        }
                    });
                    this.companyNameList = companys;
                    this.companyIdList = companyIds;
                }
            },


            //确认公司
            onConfirm(value,index) {
                this.company = value;
                this.companyId = this.companyIdList[index];
                // Toast(`当前值：${this.company}, 当前索引：${this.companyId}`);
            },
            onChange(picker, value) {
                Toast(`当前选中：${value}`);
            },
            onCancel() {
                // var company = document.getElementById("company");
                // company.click();
                // Toast('取消');
            },


            onOversize(){
                Toast.fail('图片太大，不能超过3M');
            },
            beforeRead(file){
                let fileType='';
                fileType=file.type.substr(0,file.type.indexOf('/'));
                if (fileType!== 'image') {
                    Toast('格式错误:请选择图片格式的文件');
                    return false;
                }
                return true;
            },
            afterRead(file,detail) {
                // 此时可以自行将文件上传至服务器
                //  window.console.log("detail:",detail);
                var type = detail['name'];
                let this_ = this;
                const formData = new FormData();
                formData.append("app_id", '5f840b5311cf801f6267ef6f');
                formData.append("type", 'qiniu');
                formData.append('uploadFile', file.file);
                axios.post('metadata/data/doUploadPicture?token=da38811ef3919d5e90323333c982c62a',
                    formData
                ).then(function (response) {
                    var pic = response['data']['result'];
                    if(type === 'avatar'){
                        this_.avatar = pic;
                    }else if(type === 'show'){
                        this_.showList.push(pic)
                    }
                }).catch(function (response) {
                    Toast(`上传图片时发生异常，服务器返回信息：${response}`);
                });
            },
            deleteFile(file,detail){
                this.showList.splice(detail.index,1);
            },
            onSubmit() {
                // window.console.log('this.showList', this.showList.join(","));
                let this_ = this;
                var fields = [
                    {field_name: "company", value: this.companyId, type: "string", sub_type: "varchar"},
                    {field_name: "name", value: this.name, type: "string", sub_type: "varchar"},
                    {field_name: "avatar", value: this.avatar, type: "string", sub_type: "varchar"},
                    {field_name: "show", value: this.showList.join(","), type: "string", sub_type: "varchar"},
                    {field_name: "phone", value: this.phone, type: "string", sub_type: "varchar"},
                    {field_name: "year", value: this.year, type: "string", sub_type: "varchar"},
                    {field_name: "motto", value: this.motto, type: "string", sub_type: "varchar"},
                    {field_name: "work_id", value: this.work_id, type: "string", sub_type: "varchar"},
                    {field_name: "customer_num", value: this.customer_num, type: "string", sub_type: "varchar"},
                    {field_name: "customer_payment", value: this.customer_payment, type: "string", sub_type: "varchar"},
                    {field_name: "insurance_num", value: this.insurance_num, type: "string", sub_type: "varchar"},
                    {field_name: "sum_money", value: this.sum_money, type: "string", sub_type: "varchar"},
                    {field_name: "privilege_service", value: this.privilege_service, type: "string", sub_type: "varchar"},
                    {field_name: "service_range", value: this.service_range, type: "string", sub_type: "varchar"},
                    {field_name: "email", value: this.email, type: "string", sub_type: "varchar"},
                ]
                axios.post('metadata/data/create?token=da38811ef3919d5e90323333c982c62a', {
                    obj_id: '5f840c2411cf801f6267ef77',
                    fields: fields
                }).then(function (response) {
                    let statusCode = response['data']['status']['status_code'];
                    if(statusCode === 0)
                        this_.$router.push({name:'succ'});
                    else
                        this_.msg.error("未知错误，请联系管理员")
                }).catch(function (response) {
                    Toast(`提交信息时发生异常，服务器返回信息：${response}`);
                });
            },

        },
    };
</script>

<style lang="less">
</style>
